// eslint-disable-next-line no-unused-vars
<template>
  <div class="container" id="app">
    <div class="map" id="viewDiv">
    </div>
    <div class="form">
      <h1>选择表单标题</h1>
      <form @submit.prevent="submitForm">
        <label for="select1">选择框1：</label>
        <select v-model="select1" id="select1" name="select1">
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
        <br>
        <label for="select2">选择框2：</label>
        <select v-model="select2" id="select2" name="select2">
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
        <br>
        <input type="submit" value="提交">
      </form>
    </div>
  </div>
</template>
  
<script>
import axios from "axios";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";

export default {
  name: 'MapDisplay',
  methods: {
    initMap() {
      esriConfig.apiKey = 'AAPKc0be6d4c2c814fdea6c3f44c1356b52bEhvCPa37pXRgaA6-Pk9i3U16MQZmwUpTgpTBiRN3uUfSSWcazXH0tDfVZ-JAxahT'
      // 创建地图
      const map = new Map({
        basemap: "arcgis-topographic" // 底图图层
      })

      // 创建地图视图
      // eslint-disable-next-line no-unused-vars
      const view = new MapView({
        map: map,
        center: [125.32, 43.90], // 地图中心点经纬度
        zoom: 11, // 缩放等级
        container: "viewDiv" // 地图容器id
      })
      //Trailheads feature layer (points)
      const trailheadsLayer = new FeatureLayer({
        url: ""
      });

      map.add(trailheadsLayer);
      this.trailheadsLayer = trailheadsLayer;
    },
    submitForm() {
      const formData = {
        select1: this.select1,
        select2: this.select2,
      };
      axios.post("/api/getTrailheadsUrl", formData)
        .then(response => {
          this.trailheadsLayer.url = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },

  mounted() {
    this.initMap()
  },
}
</script>
  
<style>
@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.map {
  background-color: rgb(97, 97, 233);
  width: 65%;
  height: 100%;
  margin-right: 5%;
}

.form {
  margin: 20px auto;
  width: 30%;
  height: 550px;
  margin-top: 40px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #3e97ef;
  padding: 20px;
  border-radius: 10px;
}
h1 {
    text-align: center;
  }
  label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
  }
  select {
    display: block;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 16px;
    border: none;
    background-color: #e6e6e6;
    border-radius: 5px;
    width: 100%;
  }
  input[type="submit"] {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #3e8e41;
  }
</style>